<!-- 订单信息 START -->
<nz-card [nzSize]="cardSize" class="m-b-2">
  <nz-descriptions
    nzTitle="订单信息"
    [nzBordered]="true"
    nzSize="small"
    [nzColumn]="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }">
    <nz-descriptions-item nzTitle="订单编号">
      {{ orderDetails.orderNum || '-' }}
      <ng-container *ngIf="orderDetails.orderNum">
        <i nz-icon nzType="copy" nzTheme="outline" nz-tooltip nzTooltipTitle="点击复制" nzTooltipPlacement="top" (click)="copy(orderDetails.orderNum)"></i>
      </ng-container>
    </nz-descriptions-item>

    <nz-descriptions-item nzTitle="父订单">
      <ng-container *ngIf="orderDetails?.parentOrderId;else templateFd">
        <a
          style="color: #1890ff;"
          target="_blank"
          routerLink="/used-store/usedOrderDetails"
          [queryParams]="{id: orderDetails?.parentOrderId}">
          {{ orderDetails?.parentOrderNum || '-' }}
        </a>
      </ng-container>
      <ng-template #templateFd>-</ng-template>
    </nz-descriptions-item>

    <nz-descriptions-item nzTitle="货主">
      <ng-container *ngIf="orderDetails?.supplierName;else templateThz">
        <a
          style="color: #1890ff;"
          target="_blank"
          [routerLink]="['/stock/sqeAdd', orderDetails?.supplierId]">
          {{ orderDetails?.supplierName || '-' }}
        </a>
      </ng-container>
      <ng-template #templateThz>-</ng-template>
    </nz-descriptions-item>

    <nz-descriptions-item nzTitle="下单时间">{{ orderDetails.createTime || '-' }}</nz-descriptions-item>
    <nz-descriptions-item nzTitle="付款时间">{{ orderDetails.payTime || '-' }}</nz-descriptions-item>
    <nz-descriptions-item nzTitle="审核时间">
      {{ orderDetails.auditTime || '-' }}
      <i nz-icon nzType="exclamation-circle" nzTheme="outline" nz-tooltip [nzTooltipTitle]="titleTemplate"></i>
      <ng-template #titleTemplate>
        <p>审核人：{{ orderDetails.reviewer || '-' }}</p>
        <p>审核意见：{{ orderDetails.auditDesc || '-' }}</p>
      </ng-template>
    </nz-descriptions-item>

    <nz-descriptions-item nzTitle="订单状态">
      <div class="order-countdown">
        <span [ngStyle]="{'color': orderDetails.status | orderStatus: 'color'}">
          {{ orderDetails.status | orderStatus: 'text' }}
        </span>
        <ng-container *ngIf="orderDetails.status == 2">
          （<nz-countdown [nzValue]="countDownNum()" [nzTitle]="'剩余'" (nzCountdownFinish)="loadDetailsData()"></nz-countdown>）
        </ng-container>
      </div>
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="发货时间">{{ orderDetails.shipTime || '-' }}</nz-descriptions-item>
    <nz-descriptions-item nzTitle="收货时间">{{ orderDetails.dealTime || '-' }}</nz-descriptions-item>
    <nz-descriptions-item nzTitle="评价时间">{{ orderDetails.evaluateTime || '-' }}</nz-descriptions-item>
  </nz-descriptions>
</nz-card>
<!-- 订单信息 END -->

<!-- 物流动态 START -->
<nz-card [nzSize]="cardSize" class="m-b-2">
  <p class="card-ptitle">物流动态</p>

  <div nz-row *ngIf="orderExpressList.length;else templateWl" class="wul-wrap">
    <div nz-col style="width: 100px;" [hidden]="orderExpressList.length < 2">
      <nz-tabset [(nzSelectedIndex)]="selectedIndex" nzTabPosition="left" (nzSelectedIndexChange)="tabChange($event)">
        <ng-container *ngFor="let item of orderExpressList; let index = index;">
          <nz-tab [nzTitle]="'运单' + (index + 1)"></nz-tab>
        </ng-container>
      </nz-tabset>
    </div>

    <div nz-col class="m-l-16">
      <p class="logistics-num">
        <b>{{ orderExpressList[selectedIndex]?.expressName || '-' }}</b>
        <span class="p-l-10">{{ orderExpressList[selectedIndex]?.expressNum || '-' }}</span>
        <i nz-icon nzType="copy" class="m-l-8" nzTheme="outline" nz-tooltip nzTooltipTitle="点击复制" nzTooltipPlacement="top" (click)="copy(orderExpressList[selectedIndex]?.expressNum)"></i>
      </p>
      <nz-timeline>
        <ng-container *ngFor="let item of logisticsList">
          <nz-timeline-item>
            <p class="wl-time">{{ item.time }}</p>
            <p>{{ item.station }}</p>
          </nz-timeline-item>
        </ng-container>
      </nz-timeline>
    </div>
  </div>

  <ng-template #templateWl>
    <nz-empty></nz-empty>
  </ng-template>
</nz-card>
<!-- 物流动态 END -->

<nz-card [nzSize]="cardSize" class="m-b-2">
  <!-- 收货人信息 -->
  <p class="card-ptitle">
    <span>
      收货人信息
      <i
        nz-icon
        nzType="copy"
        class="m-l-8"
        nzTheme="outline"
        nz-tooltip
        nzTooltipTitle="点击复制"
        nzTooltipPlacement="top"
        (click)="copy('收货人：' + (orderDetails.consignee || '-') + '联系电话：' + (orderDetails.tel || '-') + '收货地址：' + (orderDetails.address || '-'))">
      </i>
      <!-- <i nz-icon nzType="edit" class="m-l-10" nzTheme="outline"></i> -->
    </span>
  </p>
  <div class="p-l-16">
    <nz-descriptions
      [nzBordered]="false"
      nzSize="small"
      [nzColumn]="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }">
      <nz-descriptions-item nzTitle="收货人">{{ orderDetails.consignee || '-' }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="联系电话">{{ orderDetails.tel || '-' }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="收货地址">{{ orderDetails.address || '-' }}</nz-descriptions-item>
    </nz-descriptions>
  </div>

  <nz-divider></nz-divider>

  <!-- 买家信息 -->
  <p class="card-ptitle">
    <span>
      买家信息
      <i
        nz-icon
        nzType="copy"
        class="m-l-8"
        nzTheme="outline"
        nz-tooltip
        nzTooltipTitle="点击复制"
        nzTooltipPlacement="top"
        (click)="copy('买家账号：' + (orderDetails.userId || '-') + '买家电话：' + (orderDetails.userPhone || '-'))">
      </i>
    </span>
  </p>
  <div class="p-l-16">
    <nz-descriptions
      [nzBordered]="false"
      nzSize="small"
      [nzColumn]="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }">
      <nz-descriptions-item nzTitle="买家账号">{{ orderDetails.userId || '-' }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="买家电话">{{ orderDetails.userPhone || '-' }}</nz-descriptions-item>
    </nz-descriptions>
  </div>

  <nz-divider></nz-divider>

  <!-- 收款信息 -->
  <p class="card-ptitle">收款信息</p>
  <div class="p-l-16">
    <nz-descriptions
      [nzBordered]="false"
      nzSize="small"
      [nzColumn]="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }">
      <nz-descriptions-item nzTitle="应收总额">
        <!-- 总金额 + 邮费 -->
        {{ (orderDetails.totalPrice || 0) + (orderDetails.expressPrice || 0) }} 元
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="付款时间">{{ orderDetails.payTime || '-' }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="支付商家编号">
        {{ orderDetails.paymentMerchantNo || '-' }}
        <i *ngIf="orderDetails.paymentMerchantNo" nz-icon nzType="copy" class="m-l-8" nzTheme="outline" nz-tooltip nzTooltipTitle="点击复制" nzTooltipPlacement="top" (click)="copy(orderDetails.paymentMerchantNo)"></i>
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="实收总额">
        {{ orderDetails.realPrice || '0' }}元
        <span [ngStyle]="{'color': orderDetails.status | orderStatus: 'color'}">
          （{{ orderDetails.status | orderStatus: 'text' }}）
        </span>
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="付款方式">{{ orderDetails.payType | payStatus }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="第三方流水号">
        {{ orderDetails.payOrderNum || '-' }}
        <i *ngIf="orderDetails.payOrderNum" nz-icon nzType="copy" class="m-l-8" nzTheme="outline" nz-tooltip nzTooltipTitle="点击复制" nzTooltipPlacement="top" (click)="copy(orderDetails.payOrderNum)"></i>
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="爱豆">{{ orderDetails?.aiDouAmount || 0 }}个</nz-descriptions-item>
    </nz-descriptions>
  </div>

  <nz-divider></nz-divider>

  <!-- 分账信息 -->
  <p class="card-ptitle">分账信息</p>
  <div class="p-l-16">
    <nz-descriptions
      [nzBordered]="false"
      nzSize="small"
      [nzColumn]="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }">
      <nz-descriptions-item nzTitle="分账状态">
        <!-- 分账状态调整：0-无需分账、1-无需分账，其它值不变 -->
        <!-- <div [ngSwitch]="orderDetails?.separateStatus">
          <span *ngSwitchCase="0">无需分账</span>
          <span *ngSwitchCase="1">无需分账，其它值不变</span>
          <span *ngSwitchDefault>-</span>
        </div> -->
        <span [ngStyle]="{'color': orderDetails?.separateStatus | orderSplitAccountStatus: 'color'}">
          {{ orderDetails?.separateStatus | orderSplitAccountStatus: 'label' }}
        </span>
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="分账金额">{{ orderDetails?.separateAmount || '0' }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="分账时间">{{ orderDetails?.separateTime || '-' }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="流水单号">{{ orderDetails?.separateNo || '-' }}</nz-descriptions-item>
    </nz-descriptions>
  </div>

  <nz-divider></nz-divider>

  <!-- 退款信息 -->
  <p class="card-ptitle">退款信息</p>
  <div class="p-l-16">
    <nz-descriptions
      [nzBordered]="false"
      nzSize="small"
      [nzColumn]="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }">
      <nz-descriptions-item nzTitle="退款状态">{{ orderDetails.refundState | refundStatus }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="退款总额">{{ (orderDetails.refundPrice || 0) + (orderDetails?.refundAiDouAmount || 0) }}元</nz-descriptions-item>
      <nz-descriptions-item nzTitle="退款金额">{{ orderDetails.refundPrice || '0' }}元</nz-descriptions-item>
      <nz-descriptions-item nzTitle="爱豆">{{ orderDetails?.refundAiDouAmount || '0' }}个</nz-descriptions-item>
    </nz-descriptions>
  </div>

  <nz-divider></nz-divider>

  <!-- 优惠信息 -->
  <p class="card-ptitle">优惠信息</p>
  <div class="p-l-16">
    <nz-descriptions
      [nzBordered]="false"
      nzSize="small"
      [nzColumn]="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }">
      <nz-descriptions-item nzTitle="优惠总额">-￥{{ orderDetails.favorablePrice || '0' }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="活动优惠">-</nz-descriptions-item>
      <nz-descriptions-item nzTitle="优惠券">
        -￥{{ orderDetails.couponPrice || '0' }}
        <nz-tag *ngIf="orderDetails.couponName" class="m-l-8" nz-tooltip nzTooltipTitle="双击复制券码" (dblclick)="copy(orderDetails.couponNo)">{{ orderDetails.couponName }}</nz-tag>
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="会员折扣">-</nz-descriptions-item>
      <nz-descriptions-item nzTitle="促销活动">{{ orderDetails?.promotionPrice ? '-￥' + orderDetails?.promotionPrice : '-' }}</nz-descriptions-item>
    </nz-descriptions>
  </div>
</nz-card>

<!-- 商品信息 START -->
<nz-card [nzSize]="cardSize" class="m-b-2">
  <p class="card-ptitle">商品信息</p>

  <div class="table-wrap">
    <nz-table
      #goodTable
      nzSize="small"
      nzBordered
      [nzShowPagination]="false"
      [nzData]="goodsTableData">
      <thead>
        <tr>
          <th nzAlign="left">商品信息</th>
          <th nzAlign="center">机器编码</th>
          <th nzAlign="center">IMEI</th>
          <th nzAlign="center">序列号</th>
          <th nzAlign="center">购买单价</th>
          <th nzAlign="center">
            优惠金额
            <i nz-icon nzType="exclamation-circle" nzTheme="outline" nz-tooltip nzTooltipTitle="优惠小计是根据优惠总额均摊到每个符合优惠的商品上"></i>
          </th>
          <!-- <th nzAlign="center">已售后</th> -->
          <th nzAlign="center">售后次数</th>
          <th nzAlign="center">已退货</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of goodTable.data">
          <!-- 商品信息 -->
          <td nzAlign="left">
            <div class="goods-category">
              <span class="img-box">
                <img nz-image [nzSrc]="data.icon" [nzFallback]="fallback" alt="" />
              </span>
              <span class="goods-name">{{ data.goodsName || '-' }}</span>
            </div>
          </td>
          <!-- 机器编码 -->
          <td nzAlign="center">{{ data.equipmentCode || '-' }}</td>
          <!-- IMEI -->
          <td nzAlign="center">{{ data.imei || '-' }}</td>
          <!-- 序列号 -->
          <td nzAlign="center">{{ data.serialNumber || '-' }}</td>
          <!-- 购买单价 -->
          <td nzAlign="center">￥ {{ data.price || '0' }}</td>
          <!-- 优惠金额 -->
          <td nzAlign="center">￥ {{ data.favorablePrice || '0' }}</td>
          <!-- <td nzAlign="center">
            {{ (data.afterSaleNum && data.status == 9) ? '是' : '否' }}
          </td> -->
          <!-- 售后次数 -->
          <td nzAlign="center">{{ data.returnTotal || '0' }}</td>
          <!-- 已退货 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.returnNum ? '#52c41a' : '#ff4d4f'}">
              {{ data.returnNum ? '是' : '否' }}
            </span>
          </td>
        </tr>
        <tr *ngIf="goodsTableData.length">
          <td nzAlign="center" colSpan="4"><b>合计</b></td>
          <td nzAlign="center">￥ {{ totalReduceNum('price') }}</td>
          <td nzAlign="center">￥ {{ totalReduceNum('favorablePrice') }}</td>
          <!-- 售后次数 Total -->
          <td nzAlign="center">× {{ totalReduceNum('returnTotal') }}</td>
          <!-- 已退货 Total -->
          <td nzAlign="center">× {{ totalReturnNum('returnNum') }}</td>
        </tr>
        <tr *ngIf="goodsTableData.length">
          <td nzAlign="right" colSpan="8">
            <dl class="statistics-dl">
              <dd>运费：￥{{ orderDetails.expressPrice || '0' }}</dd>
              <dd>爱豆：￥{{ orderDetails.aiDouAmount || '0' }}</dd>
              <dt>实收总额：<span>￥{{ (orderDetails.realPrice || 0) + (orderDetails.expressPrice || 0) }}</span></dt>
            </dl>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </div>
</nz-card>
<!-- 商品信息 END -->

<!-- S 旧机信息 -->
<nz-card [nzSize]="cardSize" class="m-b-2">
  <p class="card-ptitle">旧机信息</p>

  <div class="table-wrap">
    <nz-table
      #oldTable
      nzBordered
      nzSize="small"
      [nzShowPagination]="false"
      [nzData]="orderAllInfos?.i5RecycleOrderList">
      <thead>
        <tr>
          <th nzAlign="center">机器信息</th>
          <th nzAlign="center">报价信息</th>
          <th nzAlign="center">订单号</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of oldTable.data">
          <!-- 机器信息 -->
          <td nzAlign="center">{{ data?.umname || '-' }}</td>
          <!-- 报价信息 -->
          <td nzAlign="center">
            <ng-container *ngIf="orderAllInfos?.status === 0; else syTemplate">
              预估回收报价：￥ {{ (data.uprc || 0) + (data.orderAprc || 0) }}
            </ng-container>
            <ng-template #syTemplate>
              实际回收报价：￥ {{ (data.bprc || 0) + (data.aprc || 0) }}
            </ng-template>
            <!-- {{ orderAllInfos?.status !== 2 ? '预估回收报价：￥' : '实际回收报价：￥'}}{{ data.uprc }} -->
          </td>
          <!-- 回收订单号 -->
          <td nzAlign="center">
            <a
              style="color: #40a9ff"
              target="_blank"
              routerLink="/aisi-recyc/loveOrderManage"
              [queryParams]="{ okey: data.okey }"
            >{{ data.okey }}</a>
          </td>
        </tr>

        <tr *ngIf="orderAllInfos?.i5RecycleOrderList?.length">
          <td nzAlign="right" colSpan="8">
            <dl class="statistics-dl">
              <dd>
                {{ orderAllInfos?.status === 0 ? '预估回收款总计' : '实际回收款总计' }}：￥
                {{ orderAllInfos?.status === 0 ? (orderAllInfos?.uprcSum || 0) : (orderAllInfos?.tprcSum || 0) }}
              </dd>
              <dd>
                <nz-tag nzColor="error">{{ oldOrderStatusFilter(orderAllInfos?.status) }}</nz-tag>
                <i
                  nz-icon
                  nzType="exclamation-circle"
                  nzTheme="outline"
                  nz-popover
                  nzPopoverTitle="补贴规则"
                  [nzPopoverContent]="btContentTemplate"
                ></i>
                <ng-template #btContentTemplate>
                  <ul>
                    <li *ngFor="let item of subsidyRuleList">
                      旧机回收总价满 <b>{{ item.price }}</b> 元，补贴 <b>{{ item.allowance }}</b> 元
                    </li>
                  </ul>
                  <p class="p-t-10">如符合多个门槛，则只享受最高那档补贴，补贴金额计算以旧机实际回收价为准</p>
                </ng-template>
                
                {{ orderAllInfos?.status === 0 ? '以旧换机预估补贴' : '以旧换机实际补贴' }}：￥
                {{ orderAllInfos?.status === 0 ? (orderAllInfos?.uprcSubsidy || 0) : (orderAllInfos?.tprcSubsidy || 0) }}
              </dd>
            </dl>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </div>
</nz-card>
<!-- E 旧机信息 -->

<!-- S 子订单 -->
<nz-card [nzSize]="cardSize" class="m-b-2">
  <p class="card-ptitle">子订单</p>

  <div class="table-wrap">
    <nz-table
      #sonTable
      nzBordered
      nzSize="small"
      [nzShowPagination]="false"
      [nzData]="childTableData">
      <thead>
        <tr>
          <th nzAlign="center">订单编号</th>
          <th nzAlign="center">状态</th>
          <th nzAlign="center">货主</th>
          <th nzAlign="center">应付金额</th>
          <th nzAlign="center">实付金额</th>
          <th nzAlign="center">爱豆抵扣</th>
          <th nzAlign="center">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of sonTable.data">
          <!-- 订单编号 -->
          <td nzAlign="center">
            <a
              nz-button
              nzType="link"
              target="_blank"
              [disabled]="!data?.orderNum"
              routerLink="/used-store/usedOrderDetails"
              [queryParams]="{id: data.id}">
              {{ data?.orderNum || '-' }}
            </a>
          </td>
          <!-- 状态 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.status | orderStatus: 'color'}">
              {{ data.status | orderStatus: 'text' }}
            </span>
          </td>
          <!-- 货主 -->
          <td nzAlign="center">
            <a
              nz-button
              nzType="link"
              target="_blank"
              [disabled]="!data?.supplierName"
              [routerLink]="['/stock/sqeAdd', data?.supplierId]">
              {{ data?.supplierName || '-' }}
            </a>
          </td>
          <!-- 应付金额 -->
          <td nzAlign="center">{{ data?.totalPrice || '0' }}</td>
          <!-- 实付金额 -->
          <td nzAlign="center">{{ data?.realPrice || '0' }}</td>
          <!-- 爱豆抵扣 -->
          <td nzAlign="center">{{ data?.aiDouAmount || '0' }}</td>
          <!-- 操作 -->
          <td nzAlign="center">
            <button nz-button nzType="link" [disabled]="!data.orderNum" (click)="followModal(data.orderNum)">跟进信息</button>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </div>
</nz-card>
<!-- E 子订单 -->

<!-- 售后信息 START -->
<nz-card [nzSize]="cardSize" class="m-b-2">
  <p class="card-ptitle">售后信息</p>

  <div class="table-wrap">
    <nz-table
      #saleTable
      nzSize="small"
      nzBordered
      [nzShowPagination]="false"
      [nzData]="saleTableData">
      <thead>
        <tr>
          <th nzAlign="center">申请时间</th>
          <th nzAlign="center">当前状态</th>
          <th nzAlign="center">售后单号</th>
          <th nzAlign="center">退款金额</th>
          <th nzAlign="center">退款爱豆</th>
          <th nzAlign="center">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of saleTable.data">
          <td nzAlign="center">{{ data.createTime || '-' }}</td>
          <td nzAlign="center">{{ data.status | saleAfterStatus }}</td>
          <td nzAlign="center">{{ data.returnNum || '-' }}</td>
          <td nzAlign="center">￥ {{ data.refundPrice || '0' }}</td>
          <td nzAlign="center">￥ {{ data.refundAiDouAmount || '0' }}</td>
          <td nzAlign="center">
            <button nz-button nzType="link" (click)="followModal(data.returnNum)">跟进信息</button>
          </td>
        </tr>
        <tr *ngIf="saleTableData.length">
          <td nzAlign="center" colSpan="3"><b>合计</b></td>
          <td nzAlign="center">￥ {{ reduceNum(saleTableData, 'refundPrice') }}</td>
          <td nzAlign="center">￥ {{ reduceNum(saleTableData, 'refundAiDouAmount') }}</td>
          <td nzAlign="center">-</td>
        </tr>
      </tbody>
    </nz-table>
  </div>
</nz-card>
<!-- 售后信息 END -->

<nz-card nzSize="default">
  <div class="foot-btns">
    <!-- 取消订单：待审核、审核通过、待发货 -->
    <button
      *ngIf="[3, 5, 6, 7].includes(orderDetails.status)&&permissionService.userPermission.has('used-store:usedOrder:cancelOrder')"
      nz-button
      nzType="primary"
      nzDanger
      (click)="kfCancelOrder()"
    >取消订单</button>
    <button
      nz-button
      nzType="primary"
      (click)="followModal(orderDetails.orderNum)"
    >跟进</button>
    <!-- 已发货 | 交易完成显示退款 -->
    <button
      *ngIf="[8, 9].includes(orderDetails.status)&&permissionService.userPermission.has('used-store:usedOrderList:refund')"
      nz-button
      nzType="primary"
      (click)="showModal()"
    >售后退款</button>
    <button
      nz-button
      nzType="default"
      (click)="back()"
    >返回</button>
  </div>
</nz-card>

<!-- 售后退款Modal START -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [(nzVisible)]="isAfterSaleVisible"
  nzTitle="售后退款"
  (nzOnCancel)="handleCancel()">

  <div *nzModalContent>
    <div class="custom-model-body">
      <!-- body START -->
      <form nz-form class="form-modal-body" [formGroup]="afterSaleForm">
        <p class="tip-ps-tp" *ngIf="orderDetails?.renewalNo">※ 温馨提示：当前订单是以旧换机订单，请确认核对换机补贴再退款</p>
        <p class="tip-ps" *ngIf="afterSaleForm.value.refundPrice && afterSaleForm.value.refundPrice > 10000">※ 请注意：当前输入金额数已超一万</p>
        <nz-form-item>
          <nz-form-label nzSpan="7" nzRequired>退款金额</nz-form-label>
          <nz-form-control nzSpan="17" nzErrorTip="请输入退款金额!">
            <nz-input-number
              style="width: 100%;"
              formControlName="refundPrice"
              [nzMin]="1"
              [nzStep]="1"
              [nzPrecision]="0"
              nzPlaceHolder="请输入退款金额">
            </nz-input-number>
          </nz-form-control>
        </nz-form-item>
      </form>
      <!-- body END -->

      <dl class="modal-tip-dl">
        <dt>※ 请注意</dt>
        <dd>1：确认以后，该订单会直接将填写的款项原路退回到用户账户</dd>
        <dd>2：请提前做好备注记录，不要胡乱操作，避免造成损失</dd>
        <dd>3：用户实际收到金额为“退款金额”中所填写得金额</dd>
      </dl>
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="primary" (click)="submitForm()">确定</button>
        <button nz-button nzType="default" (click)="handleCancel()">取消</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- 售后退款Modal END -->

<!-- 售后退款--确认Modal START -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [(nzVisible)]="isRefundVisible"
  nzTitle="再次确认"
  (nzOnCancel)="refundCancel()">

  <div *nzModalContent>
    <div class="custom-model-body">
      <!-- body START -->
      <div class="form-modal-body refund-wrap">
        <p class="refund-tip">请输入“确认退款”，然后点击确认来完成最终退款操作；</p>

        <nz-form-item>
          <nz-form-label nzSpan="7" nzRequired>是否退款</nz-form-label>
          <nz-form-control nzSpan="17">
            <input nz-input placeholder="请输入“确认退款”文字" [(ngModel)]="confirmText" />
          </nz-form-control>
        </nz-form-item>
      </div>
      <!-- body END -->

      <dl class="modal-tip-dl">
        <dt>※ 请注意</dt>
        <dd>点击确认以后，该订单会直接将填写的款项原路退回到用户账户</dd>
      </dl>
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="primary" (click)="refundConfirm()">确定({{ afterSaleForm.value.refundPrice || '0' }}元)</button>
        <button nz-button nzType="default" (click)="refundCancel()">取消</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- 售后退款--确认Modal END -->

<!-- 跟进Component -->
<app-follow-up #followUpRef [initParams]="initParams" [ohterParams]="{ type: 1 }"></app-follow-up>
